<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>首页-品牌选择</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/main.css">
</head>

<body>
    <div class="app" v-cloak>

    </div>
    <script src="../../script/api.js "></script>
    <script src="../../script/flexible.js "></script>
    <script src="../../script/fastclick.js "></script>
    <script src="../../script/vue.min.js "></script>
    <script src="../../script/iconfont.js "></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/businessCommon.js"></script>


    <script>
        apiready = function() {
            var UIListCard
            var vm = new Vue({
                el: '.app',
                data() {
                    return {}
                },

                mounted() {
                    this.initCitys()
                },
                methods: {
                    initCitys() {
                        var vm = this;
                        index.area('getListArea')('', true, function(ret) {
                            UIListCard = api.require('UIListCard');
                            UIListCard.open({
                                rect: {
                                    x: 0,
                                    y: 0,
                                    w: api.frameWidth,
                                    h: api.frameHeight
                                },
                                contacts: ret.data,
                                fixedOn: api.frameName,
                                styles: {
                                    backgroudColor: 'rgba(0,0,0,0)', // (可选项) 模块的背景颜色，默认：'rgba(0,0,0,0)'
                                    sectionTitle: { //（可选项）JSON对象；标题的样式
                                        bgColor: '#eee', //（可选项）字符串类型；标题的背景色，支持 rgb、rgba、#；默认：'#EEEEEE'
                                        color: '#000', //（可选项）字符串类型；标题文字颜色，支持 rgb、rgba、#；默认：'#000000'
                                        size: 12, //（可选项）数字类型；标题文字大小；默认：12.0
                                        height: 25 //（可选项）数字类型；区域标题的高度，默认：25.0
                                    },
                                    item: { //（可选项）JSON对象；列表项的样式
                                        bgColor: '#fff', //（可选项）字符串类型；列表项的背景色，支持 rgb、rgba、#；默认：'#FFFFFF'
                                        activeBgColor: '#eee', //（可选项）字符串类型；列表项按下时的背景色，支持 rgb、rgba、#；默认：'#696969'
                                        color: '#000', //（可选项）字符串类型；列表项的文字颜色，支持 rgb、rgba、#，默认：'#000000'
                                        size: 14, //（可选项）数字类型；列表项的文字大小，默认：14.0
                                        height: 40, //（可选项）数字类型；列表项的高度，默认：40.0
                                        customerColor: '#000', // (可选项)字符串类型；条目类型的文字颜色
                                        customerSize: 14, //（可选项）数字类型；条目类型的文字的大小
                                        customerWidth: 10, // (可选项) 数字类型；条目类型若为图片,则此参数有效,条目类型图片的宽度
                                        customerHeight: 10 // (可选项) 数字类型；条目类型若为图片, 则此参数有效,条目类型图片的高度
                                    }
                                }
                            }, function(ret) {
                                if (ret.eventType === "click") {
                                    api.sendEvent({
                                        name: 'notice_area_select_win',
                                        extra: {
                                            selectedItem: ret.contact
                                        }
                                    });
                                }
                            });
                        })

                    },
                },
            })
            api.addEventListener({
                name: 'showSearchPage'
            }, function(ret, err) {
                var hidden = ret.value.isShow
                if(hidden){
                    UIListCard.hide();
                }else{
                    UIListCard.show();
                }
            });
        }
    </script>
</body>

</html>